<template>
  <div>
    <a-row style="margin:10px 20px 5px">
      <a-col :span="4">
        <label>状态：</label>
        <a-select
          v-model:value="search.c_status"
          placeholder="please select your zone"
          @change="goPage(1)"
        >
          <a-select-option value>全部</a-select-option>
          <a-select-option value="2">被举报待审核</a-select-option>
          <a-select-option value="0">正常</a-select-option>
          <a-select-option value="1">已折叠</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="4">
        <lable>评论编号：</lable>
        <a-input v-model:value="search.c_id" style="width:50%"/>
      </a-col>
      <a-col :span="6">
        <label>用户编号：</label>
        <a-input v-model:value="search.u_id" style="width:60%"/>
      </a-col>
      <a-col :span="6">
        <label>对应书目：</label>
        <a-input v-model:value="search.b_name" style="width:60%"/>
      </a-col>
    </a-row>
    <a-row style="margin:5px 20px 5px">
      <a-col :span="4">
        <label>起始章节：</label>
        <a-input v-model:value="search.ch_numl" style="width:50%"/>
      </a-col>
      <a-col :span="4">
        <label>结束章节：</label>
        <a-input v-model:value="search.ch_numh" style="width:50%"/>
      </a-col>
      <a-col :span="10">
        <label>评论内容：</label>
        <a-input v-model:value="search.c_text" style="width:80%"/>
      </a-col>
    </a-row>
    <a-row style="margin:5px 20px 5px">
      <a-col :span="12">
        <label>日期范围：</label>
        <a-range-picker v-model:value="daterange" @change="onChange" format="YYYY-MM-DD"></a-range-picker>
        <a-button style="margin-left:10px" type="primary" @click="goPage(1)">查询</a-button>
      </a-col>
    </a-row>

    <a-table
      :dataSource="Data.list"
      :columns="columns"
      :pagination="pagination"
      :row-key="record => record.c_id"
      @change="handleTableChange"
    >
      <template #operation="{ record }">
        <a v-if="record.c_status!=1" @click="showComment(record)">审核</a>
        <a v-else @click="recover(record.c_id)">恢复该评论</a>
      </template>
    </a-table>
    <!--审核窗口-->
    <a-modal
      v-model:visible="visible"
      title="评论审核"
      @ok="handleOk"
      okText="评论正常"
      width="100%"
      wrapClassName="full-modal"
    >
      <a-layout-content>
        <p>评论内容：</p>
        <p>{{content}}</p>
        <a-button type="primary" style="margin: 10px;float:left" @click="passComment">折叠该评论</a-button>
      </a-layout-content>
    </a-modal>
  </div>
</template>
<script>
import { defineComponent, computed, ref, render, reactive } from "vue";
import { get, post, getBlob, tip } from "@/common";

const columns = [
  {
    title: "评论编号",
    dataIndex: "c_id",
    key: "name"
  },
  {
    title: "评论用户编号",
    dataIndex: "u_id",
    key: "u_id"
  },
  {
    title: "对应章节编号",
    dataIndex: "ch_id",
    key: "ch_id"
  },
  {
    title: "对应书目",
    key: "b_name",
    dataIndex: "b_name",
    ellipsis: true
  },
  {
    title: "对应章节序数",
    dataIndex: "ch_num",
    key: "ch_num"
  },
  {
    title: "发表日期",
    dataIndex: "c_date",
    key: "c_date"
  },
  {
    title: "评论内容",
    dataIndex: "c_text",
    key: "c_text",
    ellipsis: true
  },
  {
    title: " ",
    dataIndex: "operation",
    slots: {
      customRender: "operation"
    }
  }
];

//查询对象和结果对象
const Data = ref({});
const search = reactive({
  pageNum: 1,
  pageSize: 5,
  c_id: "",
  u_id: "",
  u_name: "",
  b_name: "",
  ch_numh: "",
  ch_numl: "",
  c_dateh: "",
  c_datel: "",
  c_text: "",
  c_status: "2"
});
const daterange = ref([]);
//分页插件
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  }
});

//获取列表
const goPage = (pageNum = 1) => {
  search.pageNum = pageNum;
  search.pageSize = pagination.pageSize;

  get("/staff/comment/search", search).then(res => {
    Data.value = res.data;
    pagination.current = Data.value.current;
    pagination.pageSize = Data.value.pageSize;
    pagination.total = Data.value.total;
  });
};
const onChange = (value, dateString) => {
  search.c_datel = dateString[0];
  search.c_dateh = dateString[1];
  console.log("Time1: ", search.c_datel);
  console.log("Time2: ", search.c_dateh);
};
goPage(1);

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  goPage(pagination.current);
};

//弹出审核窗口
const visible = ref(false);
const content = ref("");
const hanObject = reactive({
  c_id: "",
  c_status: 2
});
const showComment = com => {
  hanObject.c_id = com.c_id;
  content.value = com.c_text;
  visible.value = true;
};
const passComment = () => {
  hanObject.c_status = 1;
  post("/staff/comment/handle", hanObject).then(res => {
    hanObject.c_id = "";
    hanObject.c_status = 2;
    tip.success("该评论已折叠！");
    visible.value = false;
    goPage(search.pageNum);
  });
};
const handleOk = () => {
  hanObject.c_status = 0;
  post("/staff/comment/handle", hanObject).then(res => {
    hanObject.c_id = "";
    hanObject.c_status = 2;
    tip.success("该评论为正常评论！");
    visible.value = false;
    goPage(search.pageNum);
  });
};
const recover = id => {
  hanObject.c_id = id;
  handleOk();
};

export default defineComponent({
  setup() {
    return {
      Data,
      columns,
      pagination,

      visible,
      showComment,
      passComment,
      handleOk,
      content,
      hanObject,
      recover,

      search,
      daterange,
      onChange,
      handleTableChange,
      goPage
    };
  }
});
</script>
<style lang="less">
//审核弹出框style设定
.full-modal {
  .ant-modal {
    max-width: 60%;
    padding-bottom: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>